<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>颜色排序</title>
    <script>
        function quickSort(arr, l, r) {
            if (l >= r) return;

            let mid = solve(arr, l, r);
            quickSort(arr, l, mid - 1);
            quickSort(arr, mid + 1, r);
        }

        function solve(arr, l, r) {
            let rvis = l + Math.floor(Math.random() * (r - l + 1));
            [arr[rvis], arr[r]] = [arr[r], arr[rvis]];
            let vis = arr[r];
            let i = l - 1;
            for (let j = l; j < r; ++j) {
                if (arr[j] < vis) {
                    ++i;
                    [arr[i], arr[j]] = [arr[j], arr[i]];
                }
            }
            [arr[i + 1], arr[r]] = [arr[r], arr[i + 1]];
            return i + 1;
        }

        function sortArray() {
            let input = document.getElementById('arrayInput').value.trim();
            if (input === "") {
                document.getElementById('sortedArray').textContent = '[]';
                return;
            }

            let num = input.split(',').map(Number);

            quickSort(num, 0, num.length - 1);

            document.getElementById('sortedArray').textContent = '[' + num.toString() + ']';
        }
    </script>
</head>

<body>
    <h1>颜色排序</h1>
    <label for="arrayInput">输入数组（逗号分隔）: </label>
    <input type="text" id="arrayInput" value="1,2,0,1,1,0,1,0,0">
    <button onclick="sortArray()">排序</button>
    <p>排序后的数组: <span id="sortedArray"></span></p>
</body>

</html>